<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">职称申报管理</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">职称申报</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 说明信息 -->
    <p class="explain_css">说明：以下部分个人修改需单位审批，只有单位审批通过后个人的对应信息才会同步发生变更，未审批或审批不通过则信息维持不变！</p>
    <!-- 下面修改单位变更的内容 -->
    <div class="add_update_div">
      <h2>新单位信息</h2>
      <el-form
        label-width="230px"
        :model="newPlaceTable"
        :rules="rules"
        ref="newPlaceTable"
        class="demo-ruleForm add_education_css"
      >
        <el-form-item label="单位名称" prop="name">
          <el-input v-model="newPlaceTable.name"></el-input>
        </el-form-item>
        <el-form-item label="单位地区" prop="area">
          <el-select v-model="newPlaceTable.area">
            <el-option label="成都" value="成都"></el-option>
            <el-option label="自贡" value="自贡"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组织机构代码/统一社会信用代码" prop="code">
          <el-input v-model="newPlaceTable.code"></el-input>
        </el-form-item>
        <el-form-item label="单位性质" prop="nature">
          <el-select v-model="newPlaceTable.nature">
            <el-option label="国企" value="国企"></el-option>
            <el-option label="私企" value="私企"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属行业" prop="industry">
          <el-input v-model="newPlaceTable.industry"></el-input>
        </el-form-item>
        <el-form-item label="单位地址">
          <el-input v-model="newPlaceTable.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="add_footer_btn_css">
        <el-button plain @click="cancel" class="btn_css">取消</el-button>
        <el-button plain @click="save" class="btn_css">单位变更提交</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      newPlaceTable: {
        name: "",
        area: "",
        code: "",
        nature: "",
        industry: "",
        address: ""
      },
      rules: {
        name: [{ required: true, message: "请输入毕业院校", trigger: "blur" }],
        area: [
          { required: true, message: "请输入所学专业", trigger: "change" }
        ],
        code: [{ required: true, message: "请输入所学专业", trigger: "blur" }],
        nature: [{ required: true, message: "请选择学历", trigger: "change" }],
        industry: [
          { required: true, message: "请输入所学专业", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    save() {
      this.dialogFormVisible = false;
      /* 跳转页面 */
      sessionStorage.setItem("infoIndex", "third");
      this.$router.push("/personalinformation/personaldata");
      this.$axios({
        url: "/move/add",
        method: "post",
        data: {
          name: this.newPlaceTable.name,
          area: this.newPlaceTable.area,
          code: this.newPlaceTable.code,
          nature: this.newPlaceTable.nature,
          industry: this.newPlaceTable.industry,
          address: this.newPlaceTable.address
        }
      }).then(res => {
        console.log(res);
      });
    },
    cancel() {
      this.dialogFormVisible = false;
      this.$router.push("/personalinformation/personaldata");
    }
  },
  mounted() {
    sessionStorage.setItem("fName", "NewPlaceInformation");
  }
};
</script>
<style scoped lang="less">
.explain_css {
  margin-top: 20px;
  text-align: center;
  height: 30px;
  font-size: 16px;
  line-height: 30px;
  color: red;
  border: 2px dotted #ff3399;
  background-color: #fff4f4;
}
h2 {
  margin: 30px 0;
}
.add_update_div {
  margin-left: 50px;
  // width: 1000px;
}
.add_education_css {
  width: 450px;
  margin-left: 100px;
}
.add_footer_btn_css {
  margin-left: 300px;
  margin-top: 50px;
}
.btn_css {
  // width: 150px;
  height: 40px;
  // display: block;
  margin-right: 50px;
  background-color: #f7f7f7;
  border: 1px solid #eee;
  text-align: center;
}
</style>